<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/resource">
</head>
<title>视频主页</title>
<link rel="stylesheet" th:href="@{css/videoDetail.css}">

<body>
<div class="detail_container">
  <!-- 打开app -->
  <div class="detail_download">
    <div class="cancel_txt">
      <div class="cancel_box">
        <span class="cancel"></span>
      </div>
      <span class="txt">每个瞬间值得拥有</span>
    </div>
    <div class="download jumpApp">
      <img th:src="@{image/playLook.png}" alt="">
    </div>
  </div>
  <!-- 分享指引 -->
  <div class="share_guidance">
  </div>
  <div class="detail_video">
    <div class="video_box">
      <!-- 移动端不弹出层 x5-playsinline="" playsinline="" webkit-playsinline="" 竖屏x5-video-orientation="portrait"-->
      <video id="video_1"
             preload="auto"
             webkit-playsinline="true"
             playsinline="true"
             x5-playsinline="true"
             x-webkit-airplay="allow"
             x5-video-player-type="h5"
             x5-video-player-fullscreen="true"
             x5-video-orientation="portrait"
             loop="loop">
        <!--渲染视频-->
      </video>
      <div class="poster_img">
        <!--视频封面-->
      </div>
      <!-- 播放按钮 -->
      <div class="play_status">
        <div class="start_wrap">
          <i class="icon_play" style="display:none"></i>
        </div>
      </div>
    </div>
    <!-- 加载icon -->
    <div class="loading_icon">
      <div class="loading rotate"></div>
    </div>
    <div class="box_footer">
      <!--底部信息跟右边侧边栏-->
    </div>
  </div>
</div>
<div class="protective_cover"></div>
</body>
<!--视频封面-->
<script type="text/html" id="posterImg">
  <div style="background-image:url('{{coverUrl}}')"></div>
</script>

<!--底部信息渲染-->
<script type="text/html" id="footer">
  <!--右边侧边栏 -->
  <div class="sidebar">
    <div class="video_photo jumpApp"
         style="background: url('{{headPortraitUrl}}') no-repeat center center;background-size: cover">
      <img class="attention" th:src="@{image/plus.png}" alt="">
    </div>
    <!-- 点赞 -->
    <div class="personage_box_like jumpApp">
      <img class="like_icon" th:src="@{image/like.png}" alt="">
      <div class="like_num">{{likeCount}}</div>
    </div>
    <!-- 评论 -->
    <div class="personage_box jumpApp">
      <img class="comment_icon" th:src="@{image/comment.png}" alt="">
      <div class="comment_num">{{commentCount}}</div>
    </div>
    <!-- 转发 -->
    <div class="personage_box forward_jump">
      <img class="transpond_icon" th:src="@{image/transpond.png}" alt="">
      <div class="transpond_num">{{shareCount}}</div>
    </div>
  </div>
  <!-- 发布者信息 -->
  <div class="nickname jumpApp">
    @{{nickName}}
  </div>
  <!-- 发布者内容 -->
  <div class="content jumpApp">
    {{contentText}}
  </div>
  <!-- 进度条 -->
  <div class="progress_wrap">
    <div class="progress"></div>
  </div>
  <!-- 评论 -->
  <div class="comment_content jumpApp">
    <p>爱篮球，爱评论...</p>
  </div>
</script>

<script>
  $(function () {
    FastClick.attach(document.body);//解决300ms点击延迟的问题iphone
    var momentId = +GetRequest().momentId;
    var video = $('#video_1')[0];
    var play_status = $(".play_status")[0];

    //判断环境
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
    var isiPhone = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    var isWeixin = u.indexOf('MicroMessenger') > -1;
    var isQQ = u.match(/QQ\//i) == "QQ/";
    var url = "huanai://ltx/moment?momentId=" + momentId;
    weixinPlay();
    //用户昵称、文本内容、评论等跳转到app
    $(".detail_container").on("click", ".jumpApp", function () {
      if (/MicroMessenger/gi.test(u) || u.match(/QQ\//i) == "QQ/") {
        if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {//ios环境)
          $(".protective_cover").css("background-image", "url([[@{image/ios.png}]])")
        }
        $(".protective_cover").show();
        return false;
      }
      jumpApp(url)
    });
    //  点击×
    $(".detail_download .cancel_txt .cancel_box").on("click", function () {
      $(".detail_download").css("display", "none")
    })
    //去掉引导页
    $(".protective_cover").on("click", function () {
      $(this).hide();
    })

    // 判断是否是微信浏览器
    function weixinPlay() {
      render();
      aboutVideo();
      if (isiPhone) {
        if (isWeixin) {
          // 处理微信不能自动播放
          document.addEventListener("WeixinJSBridgeReady", function () {

            video.play();

          }, false)
          // 转发指引
          $(".box_footer").on("click", ".forward_jump", function () {
            $(".share_guidance").css("display", "block")
          })

          $(".share_guidance").on("click", function () {
            $(".share_guidance").css("display", "none")
          })
        } else {
          //播放按钮
          $(".icon_play").css("display", "inline-block");
          //  非微信环境下载app
          $(".box_footer").on("click", ".forward_jump", function () {
            jumpApp(url)
          })
        }
      }
      if (isAndroid) {
        if (isWeixin) {
          //播放按钮
          $(".icon_play").css("display", "inline-block");
          // 转发指引
          $(".box_footer").on("click", ".forward_jump", function () {
            $(".share_guidance").css("display", "block")
          })

          $(".share_guidance").on("click", function () {
            $(".share_guidance").css("display", "none")
          })
        } else if (isQQ) {//可以自动播放

          video.play();

          //  非微信环境下载app
          $(".box_footer").on("click", ".forward_jump", function () {
            jumpApp(url)
          })
        } else {
          //播放按钮
          $(".icon_play").css("display", "inline-block");
          //  非微信环境下载app
          $(".box_footer").on("click", ".forward_jump", function () {
            jumpApp(url)
          })
        }
      }
    }

    //数据渲染
    function render() {
      $(".loading_icon").show();
      $.post('[[@{/apiMoment/singleMoment}]]', {momentId: momentId}, function (data) {
        $(".loading_icon").hide();
        var data = JSON.parse(data);
        if (data.ret == "0") {
          //渲染视频
          if (data.playUrl != "") {
            $("#video_1").prop("src", data.playUrl);
          } else {
            layer.open({
              content: '没有该视频'
              , skin: 'msg'
              , time: 2 //2秒后自动关闭
            });
          }
          //渲染模板
          var posterImg = template("posterImg", data);
          var footer = template("footer", data);
          $(".poster_img").html(posterImg);
          $(".box_footer").html(footer);
          console.log(data)
          //对发起话题跟@人添加文字颜色
          var textExtra = data.textExtra;
          var contentStr = data.contentText;
          var textColor;//带有颜色文字
          if (textExtra == "") {//处理没用的
            textColor = contentStr
          } else {
            textExtra = JSON.parse((data.textExtra));
            var newArr = [];//所有字体需要加重的集合
            textExtra.map(function (v) {
              var tagStart = v.start;
              var tagEnd = v.end;
              var intercept = contentStr.substring(tagStart, tagEnd);
              newArr.push(intercept);
            })
            var newString = newArr.join("|");
            var reg = new RegExp("(" + newString + ")", "g");
            textColor = contentStr.replace(reg, '<span style="color:rgb(255,255,255);font-weight: bold">$1</span>');
          }
          $(".box_footer .content").html(textColor)
        } else {
          layer.open({
            content: data.msg
            , skin: 'msg'
            , time: 2 //2秒后自动关闭
          });
        }
      });
    }

    //  暂停播放
    function vidplay(evt) {
      if (video.paused) {
        video.play();
        $(".icon_play").hide();
      } else {
        video.pause();
        $(".icon_play").css("display", "inline-block");
      }
    }

    // video的播放条
    function getProgress() {
      var percent = video.currentTime / video.duration;
      var width = Math.round(percent * 10000) / 100 + "%";
      $(".progress").css("width", width);
    }

    //所有操作视频的事件
    function aboutVideo() {
      //  点击播放跟暂停
      play_status.addEventListener("click", vidplay, false);
      // //页面加载的时候出现封面
      video.addEventListener("loadstart", function () {
        $(".loading_icon").show();
        //获取改封面的图片地址对图片的宽高判断进行处理宽大于高时横屏展示
        var imgSrc = $(".poster_img div").css("background-image").split("\"")[1];
        var img_url = imgSrc + "?" + Date.parse(new Date());
        // // 创建对象
        var img = new Image();
        // // 改变图片的src
        img.src = img_url;
        img.onload = function () {
          if (img.width > img.height) {
            $(".poster_img div").css("background-size", "contain")
          }
          $(".poster_img div").show();
        }
      }, false);
      // //开始播放的时候封面消失
      video.addEventListener("timeupdate", function () {
        $(".poster_img div").hide();
        getProgress();
      }, false);
      // //  在页面加载后，视频的原数据加载前触发对视频宽大于高时横屏展示
      video.addEventListener("durationchange", function () {
        if ($("#video_1")[0].videoWidth > $("#video_1")[0].videoHeight) {
          $("#video_1")[0].style.cssText = "object-fit:contain";
        }
      }, false);
      // //  视频播放失败
      video.addEventListener("error", function () {
        var err = this.error.code;
        if (err == 1) {
          //提示
          layer.open({
            content: '取回过程被用户中止'
            , skin: 'msg'
            , time: 2 //2秒后自动关闭
          });
        } else if (err == 2) {
          layer.open({
            content: '当下载时发生错误'
            , skin: 'msg'
            , time: 2 //2秒后自动关闭
          });
        } else if (err == 3) {
          layer.open({
            content: '当解码时发生错误'
            , skin: 'msg'
            , time: 2 //2秒后自动关闭
          });
        } else if (err == 4) {
          layer.open({
            content: '不支持视频'
            , skin: 'msg'
            , time: 2 //2秒后自动关闭
          });
        }

      }, false);
      //当视频由于需要缓冲下一帧而停止时展示loading
      video.addEventListener("waiting", function () {
        $(".loading_icon").show()
      })
      //当浏览器可以播放时隐藏loading
      video.addEventListener("canplay", function () {
        $(".loading_icon").hide();
      })
    }

  })
</script>

</html>